<template>
  <StatusBar />
  <view class="pages">
    <!-- 头部 -->
    <view class="pages-header">
      <wd-img @click="showPopup = !showPopup" round :src="imgurl" />
      <text>{{ userStore.userInfo?.realName }}</text>
      <view class="setting" @click="openSettingPopup">
        <wd-icon name="setting1" />
      </view>
    </view>
    <!-- 内容 -->
    <view class="pages-content">
      <component :is="currentPage" v-if="currentPage" />
    </view>
    <view class="server-address">
      <text>{{ serverIp }}</text>
    </view>
  </view>
  <!--侧边栏-->
  <wd-popup custom-class="popup-sidebar" v-model="showPopup" modal-style="opacity:0.2"
            position="left" custom-style="width:500rpx;background:var(--theme-color);display:flex;flex-direction:column;">
    <StatusBar />
    <view class="sidebar-top">
      <wd-img round :src="imgurl" />
      <text>{{ userStore.userInfo?.realName }}</text>
    </view>
    <view class="sidebar-content">
      <sidebar-menu :menus="userStore.menus" :current-path="currentPageKey"/>
    </view>
    <view class="sidebar-bottom">
      <wd-button type="info" @click="logout">退出登录</wd-button>
    </view>
  </wd-popup>
  <!--设置弹窗-->
  <setting-popup ref="settingPopup" />
</template>

<script setup lang="ts">
import Bus from '@/utils/bus';
import pageMap from '@/router/route';
import { useUserStore } from "@/store";
import httpRequest from "@/utils/request";
import SettingPopup from './setting-popup.vue';
import SidebarMenu from '@/components/sidebar-menu.vue';
import { ref, onMounted, shallowRef, markRaw } from "vue";
import { setSysTheme, _themeColorKey } from "@/style/theme";
const serverIp = import.meta.env.VITE_APP_API_URL;

let imgurl = 'https://img1.baidu.com/it/u=2743394743,692629981&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800';
const showPopup = ref(false);
const currentPage = shallowRef<any>(null);
const currentPageKey = ref('');
const settingPopup = ref();// 设置弹窗引用

// 使用 store
const userStore = useUserStore();

// 打开设置弹窗
const openSettingPopup = () => {
  settingPopup.value.open();
}

// 退出登录
const logout = () => {
  userStore.logout();
  uni.showToast({
    title: "已退出登录",
    icon: "success",
  });
};

const onMenuClick = async (menu: any) => {
  const component = pageMap[menu.path]
  if (!component) {
    console.error('页面不存在, path = ', menu.path);
    return;
  }
  showPopup.value = false;
  if (menu.path === currentPageKey.value) {
    console.log('当前页面无需刷新');
    return; 
  }
  currentPageKey.value = menu.path;
  currentPage.value = markRaw(component);
}

// 递归获取第一个菜单的路径，如果没有菜单则返回暂无权限页面
const getFirstMenuPath = (menus: Menu[]):string => {
  for (const menu of menus) {
    if (menu.children && menu.children.length > 0) {
      const path = getFirstMenuPath(menu.children);
      return path;
    }
    else {
      return menu.path;
    }
  }
  return "/pages/dashboard/un-permission";
}

onMounted(() => {
  // 初始化主题色
  const bgColor = uni.getStorageSync(_themeColorKey) || '#2c3e50';
  setSysTheme(bgColor);

  // 监听菜单点击事件
  Bus.on('menu-children-click', onMenuClick);

  // 初始化当前页面
  const path = getFirstMenuPath(userStore.menus);
  const component = pageMap[path];
  if (component) {
    currentPageKey.value = path;
    currentPage.value = markRaw(component);
  }
  else {
    console.error('页面不存在, url = ', path); 
  }

  // 进入APP时检查登录状态，如果未登录则跳转到登录页
  httpRequest({
    url: "/atcp-auth/verify",
    method: "GET", 
  })
})
</script>

<style lang="scss" scoped>
.pages {
  width: 100%;
  height: 100vh;
  position: relative;
  .pages-header {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    background: var(--theme-color);
    .wd-img {
      height: 80%;
      aspect-ratio: 1/1;
      margin-right: 20rpx;
    }
    text {
      color: var(--font-color);
      font-size: 40rpx;
      flex: 1;
    }
    .setting {
      width: 60rpx;
      .wd-icon {
        color: var(--font-color);
        font-size: 50rpx; 
      }
    }
  }
  .server-address {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10rpx 0;
    text-align: center;
    color: #ccc;
    font-size: 0.8rem;
    z-index: 999;
  }
}
.popup-sidebar {
  width: 500rpx;
  background: var(--theme-color);
  display: flex;
  flex-direction: column;
  .sidebar-top {
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .wd-img {
      width: 28%;
      aspect-ratio: 1/1;
      margin-right: 20rpx;
    }
    text {
      color: var(--font-color);
      font-size: 40rpx;
    }
  }
  .sidebar-content {
    flex: 1;
    :deep(.wd-collapse) {
      background: none !important;
    }
    .sidebar-collapse {
      :deep(.wd-collapse-item__title), 
      :deep(.wd-collapse-item__content) {
        color: white;
        font-size: 30rpx;
      }
      :deep(.wd-collapse-item__content) {
        background: var(--theme-color);
      }
      :deep(.rm-badge .wd-collapse-item__arrow) {
        display: none!important;
      }
      :deep(.active-menu .wd-collapse-item__title) {
        color: var(--select-menu-font-color) !important;
      }
    }
  }
  .sidebar-bottom {
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
